import React,{useEffect ,useState} from 'react'
import { useNavigate } from 'react-router-dom';
import { useDispatch ,useSelector } from 'react-redux';
import { Swiper,Grid,Cell, Image   } from 'react-vant';
import {STROETYPE ,PROPSTYPE} from '../../Type/Store.d';
import ChildrenItem from '../../Com/ChildrenItem';
import SwiperItem from '../../Com/SwiperItem';
import { NewArrival } from '@react-vant/icons';
function New() {
    const Dispatch = useDispatch();
    const Navigate = useNavigate();

    const list = useSelector((state:STROETYPE)=>state.list);
    const onclickBtn = (id:number,item:PROPSTYPE)=>Navigate('/Detail/'+id,{state:item})
    return (
        <div className='New'>
            <SwiperItem></SwiperItem>
            <Grid columnNum={4}>
                {list.map((item, index) => (
                    <Grid.Item key={index} icon={ <Image width={44} height={44} src={item.src} round/> } text={item.txt} />
                ))}
            </Grid>
            <h3><NewArrival fontSize={30} color="green"/> 今日新游</h3>
            <main>
            {list.map((item, index) => (
                <ChildrenItem item={item} key={index} onclickBtn={onclickBtn}></ChildrenItem>
            ))}
            </main>
        </div>
    )
}

export default New